<template>
	<div class="bgc" @mousemove="onMousemove" :style="{ backgroundColor: `hsl(${x}, 40%, 50%)` }">
		<div class="form">
			<h3>登录</h3>
			<el-form
				:label-position="labelPosition"
				label-width="80px"
				:model="formLabelAlign"
				:show-message="true">
				<el-form-item label="账号">
					<el-input v-model="formLabelAlign.phone"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="formLabelAlign.password"></el-input>
				</el-form-item>
			</el-form>
			<el-button type="primary" :disabled="isOK" @click="login">进入控制台</el-button>
		</div>
	</div>
</template>

<script>
import { login } from '@/api/login';
export default {
	name: 'Login',
	data() {
		return {
			isOK: true,
			x: 0,
			labelPosition: 'right',
			formLabelAlign: {
				phone: '',
				password: '',
			},
		};
	},
	watch: {
		formLabelAlign: {
			immediate: true,
			deep: true,
			handler(newVal) {
				this.isOK = false;
				Object.values(newVal).forEach(value => {
					if (!value) this.isOK = true;
				});
			},
		},
	},
	methods: {
		login() {
			login(this.formLabelAlign).then(resolve => {
				this.$router.replace('/');
			});
		},
		onMousemove(e) {
			this.x = e.clientX;
		},
	},
};
</script>

<style lang="less" scoped>
.bgc {
	width: 100vw;
	height: 100vh;
	transition: 0.3s background-color ease;
	.form {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 500px;
		height: 280px;
		padding: 0 50px;
		border-radius: 10px;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.25);
			// backdrop-filter: blur(15px);
			filter: blur(40px);
			z-index: -1;
		}
		h3 {
			text-align: center;
			padding: 20px 0;
		}
		.el-button {
			margin-left: 150px;
			margin-top: 10px;
		}
	}
}
</style>
